<div style="<%= section_styles(section) %>">
  <div class="page-container">
    <nav id="breadcrumbs" aria-label="breadcrumbs">
      <% if @product.present? %>
        <% taxons = product_breadcrumb_taxons(@product) %>

        <ul class="inline-flex gap-3 text-sm">
          <% taxons.each_with_index do |taxon, index| %>
            <li class="opacity-50"><%= link_to taxon.name, spree.nested_taxons_path(taxon), title: taxon.name %></li>
            <div class="breadcrumb-square opacity-50 <%= 'hidden md:block' if index == taxons.length - 1 %>"></div>
          <% end %>

          <li class="hidden lg:block text-text opacity-100"><%= @product.name %></li>
        </ul>
      <% end %>
    </nav>
  </div>
</div>